<!DOCTYPE HTML>
<html>
	<head>
		<meta charset='utf-8' />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>三栏布局</title>
		
		<style>
		/*genneral*/
		html,body {
			margin:0;
			padding: 0;
		}

		#top,#bottom {
			height:100px;
			background-color:#666;
			width:100%;
		}

		#content {
			width: 100%;
			float:left;
		}

		#left,#right {
			width:200px;
			float:left;
			height:600px;
			background-color: #F60;
		}

		#left {
			margin-left:-100%;
		}

		#right {
			margin-left: -200px;
		}

		#middle {
			margin:0 210px;
			background-color: #888;
			height:600px;
		}

		.clearFix:after {
			content:'.';
			height: 0;
			display: block;
			visibility: hidden;
			clear:both;
		}

		</style>
	</head>
	<body>
	<div id="top"></div>
	<div id="mainWarp" class='clearFix'>
		<div id="content">
			<div id="middle">中</div>	
		</div>
		<div id="left">左</div>
		<div id="right">右</div>
	</div>
	<div id="bottom"></div>
	</body>
</html>
